<template>
	<view class="counter">
		<view class="counterItem" @tap="onMinus">
			<text :class="quantity <= 1 ? 'counterItemDisableText' : 'counterItemText'">-</text>
		</view>
		<view class="counterItem counterNum">
			<input type="number" :value="quantity" class="counterInput" maxlength="2" />
		</view>
		<view class="counterItem" @tap="onPlus">
			<text :class="quantity >= limit ? 'counterItemDisableText' : 'counterItemText'">+</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			quantity: {
				type: Number,
				default: 1
			},
			limit: {
				type: Number,
				default: 99
			}
		},
		methods: {
			onMinus() {
				if (this.quantity <= 1) return
				this.$emit('minus')
			},
			onPlus() {
				if (this.quantity >= this.limit) return
				this.$emit('plus')
			}
		}
	}
</script>

<style scope>
	.counter {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
	  border-width: 1rpx;
	  border-color: #dddddd;
	  border-radius: 30rpx;
	  /* width: 150rpx; */
	  height: 60rpx;
	  flex-direction: row;
	  /* position: absolute;
	  right: 20rpx;
		bottom: 15rpx; */
	},
	.counterItem {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	  width: 60rpx;
	},
	.counterItemText {
		font-size: 28rpx;
		color: #37383d;
	}
	.counterItemDisableText {
		font-size: 28rpx;
		color: #dddddd;
	}
	.counterNum {
	  padding: 0;
	  border-width: 0;
	  border-left-width: 1rpx;
	  border-left-color: #dddddd;
		border-left-style: solid;
	  border-right-width: 1rpx;
	  border-right-color: #dddddd;
		border-right-style: solid;
	}
	.counterInput {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>
